<!--
@Author: 魏巍 <jswei>
@Date:   2018-08-10T21:38:02+08:00
@Email:  524314430@qq.com
@Filename: swiper.vue
@Last modified by:   jswei
@Last modified time: 2018-08-28T04:32:15+08:00
@Copyright: free
-->

<template>
    <div class="mt-swiper">
      <mt-swipe @change="handleChange" :speed="speed" :auto="auto" :continuous="continuous" :prevent="prevent" :showIndicators="showIndicators">
        <mt-swipe-item v-for="(item,index) in data" :key="index">
          <img :src="item.image" :alt="item.title" class="mt-swiper-image">
          <p class="mt-swiper-title">{{item.title}}</p>
        </mt-swipe-item>
      </mt-swipe>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    speed: {
      type: Number,
      default: 300
    },
    auto: {
      type: Number,
      default: 3000
    },
    showIndicators: {
      type: Boolean,
      default: true
    },
    prevent: {
      type: Boolean,
      default: true
    },
    continuous: {
      type: Boolean,
      default: true
    }
  },
  created () {
  },
  methods: {
    handleChange(index) {
      this.$emit("change", index)
    }
  }
};
</script>

<style lang="scss" scoped>
  .mt-swiper{
    padding-top: 3.5rem;
    height: 15rem;
    .mint-swipe-items-wrap{
      .mint-swipe-item{
        position: relative;
        .mt-swiper-image{
          width: 100%;
          height: 15rem;
        }
        .mt-swiper-title{
          position: absolute;
          left: 0;
          bottom: -1rem;
          z-index: 10;
          width: 100%;
          background-color: #000;
        }
      }
    }
  }
</style>
